.home{
  width: 100%;
  height: 100%;
  .header_box{
    padding: Rm(19) Rm(14) 0;
    .bg{
      width: Rm(374);
      height: Rm(202);
      background-color: #32ddbb;
      position: absolute;
      top: Rm(-19);
      left: 0;
    }
    header{
      height: Rm(31);
      padding:  0 Rm(5) 0 Rm(6);
      position: relative;
      display: flex;
      justify-content: space-between;
      img{
        width: Rm(12);
        height: Rm(12);
        position: absolute;
        top: Rm(11);
        left: Rm(24);
      }
      input{
        width: Rm(266);
        height: Rm(31);
        text-indent: Rm(39);
        border: none;
        border-radius: 25px;
        background-color: #7fe9d8;
      }
      input::-webkit-input-placeholder {
        color: #fff;
      }
      button{
        width: Rm(58);
        height: Rm(31);
        text-align: center;
        padding: 0;
        border: none;
        color: #ffffff;
        border-radius: 25px;
        background-color: #9ef2d5;
      }
    }
  }
  .adm-swiper-slide{
    width: auto;
  }
  .swiper {
    width: Rm(336);
    height: Rm(158);
    padding:  0 Rm(4) 0 Rm(4);
    margin-top: Rm(11);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    border-radius: 25px;
  }
  .adm-swiper-indicator{
    display: none;
  }
  .home_tab{
    width: Rm(336);
    height: Rm(76);
    padding: Rm(6) 0 Rm(6);
    margin: Rm(18) auto 0;
    box-shadow: Rm(0) Rm(0) 0 Rm(4) #fcfcfc;
    ul{
      display: flex;
      justify-content: space-between;
      li{
        height: Rm(65);
        .circle{
          width: Rm(43);
          height: Rm(43);
          border-radius: 50%;
          &.homeABack{
            background-image: url('../gkk_img/camera.png');
            background-repeat: no-repeat;
            background-size: Rm(24) Rm(18);
            background-position: center;
            background-color: #63d7ff;
          }
          &.toolsBack{
            background-image: url('../gkk_img/tools.png');
            background-repeat: no-repeat;
            background-size: Rm(24) Rm(18);
            background-position: center;
            background-color: #a0adfd;
          }
          &.shoesBack{
            background-image: url('../gkk_img/shoes.png');
            background-repeat: no-repeat;
            background-size: Rm(24) Rm(18);
            background-position: center;
            background-color: #ffd088;
          }
          &.makeupBack{
            background-image: url('../gkk_img/makeup.png');
            background-repeat: no-repeat;
            background-size: Rm(24) Rm(18);
            background-position: center;
            background-color: #ffa0c6;
          }
          &.classifyBack{
            background-image: url('../gkk_img/classify.png');
            background-repeat: no-repeat;
            background-size: Rm(24) Rm(18);
            background-position: center;
            background-color: #83eb7b;
          }
        }
        span{
          display: inline-block;
          color: #b4b4b4;
          margin-top: Rm(7);
        }
      }
    }
  }
  .publicWe{
    width: Rm(347);
    padding: Rm(12) Rm(7) Rm(12) Rm(7);
    margin: Rm(33) auto 0;
    box-shadow: Rm(0) Rm(0) 0 Rm(4) #fcfcfc;
    h4{
      padding: 0 Rm(6) 0 Rm(9);
      display: flex;
      justify-content: space-between;
      div{
        width: Rm(71);
        height: Rm(22);
        line-height: Rm(22);
        i{
          float: left;
          width: Rm(5);
          height: Rm(22);
          margin-right: Rm(4);
          background-image: url('../gkk_img/publicWe_jux.png');
          background-repeat: no-repeat;
          background-size: Rm(5) Rm(22);
        }
        span{
          float: left;
          font-size: Rm(13);
          color: #333333;
        }
      }
      a{
        line-height: Rm(22);
        font-size: Rm(7);
        color: #666666;
      }
    }
    .publicWe_imgBox{
      width: Rm(332);
      height: Rm(101);
      margin-top: Rm(14);
      img{
        width: Rm(332);
        height: Rm(101);
        border-radius: 5px;
      }
    }
    .publicWe_heartBox{
      height: Rm(12);
      margin: Rm(7) 0 Rm(8) 0;
      img{
        float: left;
        width: Rm(12);
        height: Rm(11);
        margin-right: Rm(4); 
      }
      span{
        float: left;
        font-size: Rm(10);
        color: #f11673;
        position: relative;
        top: Rm(-3);
      }
    }
    .publicWe_giveLoveBox{
      display: flex;
      justify-content: space-between;
      p{
        color: #666;
        font-size: Rm(7);
      }
      .publicWe_giveLoveBox_right{
        width: Rm(108);
        height: Rm(13);
        .praise_box{
          display: inline-block;
          width: Rm(30);
          height: Rm(13);
          &.marR{
            margin-right: Rm(9);
          }
          i{
            display: inline-block;
            width: Rm(7);
            height: Rm(8);
            margin-right: Rm(3);
            &.backImg{
              background-image: url('../gkk_img/praise.png');
              background-repeat: no-repeat;
              background-size: Rm(7) Rm(8);
            }
            &.backImg2{
              background-image: url('../gkk_img/eyes.png');
              background-repeat: no-repeat;
              background-size: Rm(7) Rm(8);
            }
            &.backImg3{
              background-image: url('../gkk_img/comment.png');
              background-repeat: no-repeat;
              background-size: Rm(7) Rm(8);
            }
          }
          span{
            color: #a0a0a0;
            font-size: Rm(6);
          }
        }
      }
    }
  }
  .home_square{
    width: Rm(347);
    padding: Rm(12) Rm(7) Rm(12) Rm(7);
    margin: Rm(33) auto 0;
    h4{
      padding: 0 Rm(6) 0 Rm(9);
      display: flex;
      justify-content: space-between;
      div{
        width: Rm(71);
        height: Rm(22);
        line-height: Rm(22);
        i{
          float: left;
          width: Rm(5);
          height: Rm(22);
          margin-right: Rm(4);
          background-image: url('../gkk_img/publicWe_jux.png');
          background-repeat: no-repeat;
          background-size: Rm(5) Rm(22);
        }
        span{
          float: left;
          font-size: Rm(13);
          color: #333333;
        }
      }
      a{
        line-height: Rm(22);
        font-size: Rm(7);
        color: #666666;
      }
    }
    .squareTopic_item{
      width: Rm(176);
      height: Rm(160);
      margin-top: Rm(20);
      h5{
        color: #666666;
        font-size: Rm(7);
      }
      .squareTopic_item_img{
        width: Rm(164);
        height: Rm(94);
      }
    }
  }
}

